<template>
    <mu-paper class="paperz" :zDepth="2">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-select v-model="searchList.search" placeholder="请选择" size="mini" style="width: 90px">
                    <el-option v-for="item in searchs" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请输入内容" size="mini" v-model="searchList.searchValue"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" @click="getBillingList">搜索
                </el-button>
            </el-form-item>
            <div style="display: inline-block;padding: 10px;">微信绑定账号：余额</div>
        </el-form>
        <el-table
                :data="tableData"
                @selection-change="handleSelectionChange"
                @filter-change="filter"
                style="width: 100%;">
            <el-table-column
                    type="selection"
                    width="40">
            </el-table-column>
            <el-table-column
                    prop="user"
                    label="用户"
                    width="80" fixed>
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号"
                    width="80"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="80">
            </el-table-column>

            <el-table-column
                    prop="pay"
                    label="支付方式"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="payname"
                    label="支付账户"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="orderId"
                    label="交易单号"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="orderId"
                    label="支付账号"
                    width="80"
            >
            </el-table-column>
            
            <el-table-column
                    prop="explain"
                    label="提现类型"
                    width="100"
                    :filters="[{ text: '本金', value: '本金提现' }, { text: '佣金', value: '佣金提现' }, { text: '收米吧', value: '收米吧打款' }]"
                    column-key="filterTask" :filter-multiple="filterStatus.task" filter-placement="bottom-end"
            >
            </el-table-column>
            <el-table-column
                    prop="change"
                    label="变化"
                    width="80"
            >
                <template slot-scope="scope">
                    <div>
                        <mu-badge :content="scope.row.change" color="rgb(63, 158, 255)" slot="after"
                                  v-if="scope.row.change > 0"/>
                        <mu-badge :content="scope.row.change" color="red" slot="after" v-else/>
                    </div>
                </template>
            </el-table-column>

            <el-table-column
                    prop="orderId"
                    label="余额"
                    width="80"
            >
            </el-table-column>

            <el-table-column
                    prop="money"
                    label="剩余"
                    width="80"
            >
            </el-table-column>
            <el-table-column
                    prop="addTime"
                    label="日期"
                    width="80"
            >
                <template slot-scope="scope">
                    {{scope.row.addTime | timeTo(1)}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="text"
                    label="备注"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="admin"
                    label="打款人"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop=""
                    label="支付时间"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="admin"
                    label="地区"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="admin"
                    label="师徒类型"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="100"
                    :filters="[{ text: '待审核', value: '0' }, { text: '正常', value: '1' }]"
                    :filter-multiple="filterStatus.status" column-key="filterUser" filter-placement="bottom-end"
            >
                <template slot-scope="scope">

                    <div v-if="scope.row.status === '1'">
                        <el-button type="text">正常</el-button>
                    </div>
                    <div v-if="scope.row.status === '0'">
                        <el-button type="text" @click="switchMoneyStatus(1,scope.row.id)" style="color: red">待人工审核
                        </el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    prop=""
                    label="审核人"
                    width="80"
            >
            </el-table-column>

        </el-table>
        <br/>
        <div v-if="multipleSelection[0]">
            <el-button size="mini" type="primary"
                       @click="setArr('delete','','删除')">删除
            </el-button>
            <el-button size="mini" type="primary"
                       @click="setArr('ok','','审核通过')">审核通过
            </el-button>
        </div>
        <br/>
        <el-pagination
                :page-size="20"
                :current-page="searchList.pn"
                layout="prev, pager, next"
                :total="searchList.total"
                @current-change="pnChange"
                v-if="searchList.total > 20"
        >
        </el-pagination>

    </mu-paper>
</template>
<script>


    export default {

        data() {
            return {

                moneyInfoList: {
                    shop: '',
                    babyId: '',
                    money: '',
                    principal: '',
                    comMoney: '',
                    toNum: '',
                    endNum: '',
                    theNum: '',
                    alsoNum: '',
                    taskAsk: '',
                    taskInfo: ''
                },
                taskInfoListTemp: {},
                tableData: [],
                searchs: [
                    {
                        value: "user",
                        label: "用户名",
                    },
                    {
                        value: 'orderId',
                        label: '交易单号',
                    },
                    {
                        value: 'admin',
                        label: '打款人',
                    }
                ],
                searchList: {
                    search: "user",
                    searchValue: "",
                    filter: {
                        status: "",
                    },
                    pn: 1,
                    total: 0,
                },
                filterStatus:
                    {
                        status: false,
                        task: false
                    }
                ,
                multipleSelection: [],
            }
        },
        methods: {
            pnChange(pn) {
                this.searchList.pn = pn;
                this.getBillingList();
            },
            setArr(a, b, c) {
                let _this = this;
                _this.$confirm("确认" + c + "?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    _this.$http
                        .post("/api/api.php", {
                            id: "setArr",
                            table: 'billing',
                            set: a,
                            field: b,
                            arr: JSON.stringify(_this.multipleSelection),
                        })
                        .then(function (response) {
                            _this.$message({
                                type: response.data.status,
                                message: response.data.msg
                            });
                            _this.getBillingList();
                        });
                })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消"
                        });
                    });
            },
            getBillingList() {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "getBillingList",
                        search: JSON.stringify(_this.searchList)
                    })
                    .then(function (response) {
                        _this.tableData = response.data.data;
                        _this.searchList.total = parseInt(response.data.total);
                    });
            },
            filter(value) {
                value.filterUser
                    ? (this.searchList.filter.status = value.filterUser[0])
                    : (this.searchList.filter.explain = value.filterTask[0]);
                this.getBillingList();
            },
            switchMoneyStatus(a, b) {
                let title;
                let _this = this;
                _this.$confirm("确认通过吗？", "提示", {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    _this.$http.post("/api/api.php", {
                        id: "updateBillingStatus",
                        user: b,
                        status: a
                    }).then(function (response) {
                        _this.$message({
                            type: response.data.status,
                            message: response.data.msg
                        });
                        _this.getBillingList();
                    });
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        },
        mounted() {
            this.getBillingList();
        }
    }
</script>
<style scoped>
    .paperz {
        height: 90%;
        padding: 15px;
    }

    .demo-table-expand {
        font-size: 0;
        margin-left: 50px;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    .dedleteUserDialog {
        width: 980px;
    }
</style>
